import * as echarts from 'echarts'
export default function DisplayEC (ref:any, value:string) {
    let myChart = echarts.init(ref)
    // myChart.dispose();
    // 通过ref属性来获取图表的实例
    type EChartsOption = echarts.EChartsOption;
    myChart = echarts.init(ref)
    window.addEventListener('resize', function () {
        myChart.resize()
    })
    // const symbolSize:number = 15

    console.log('echarts', value)
    let option: EChartsOption
    if (value === 'a') {
        option = {
            title: {
                text: '全部订单',
                left: '20px',
                top: 15,
                textStyle: {
                    fontWeight: 500,
                    fontSize: 18
                }
            },
            grid: {
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['35%', '50%'],
                    data: [
                        {
                            value: 8170,
                            name: '已处理',
                            itemStyle: { color: '#ff6200' }
                        },
                        {
                            value: 4000,
                            name: '已取消',
                            itemStyle: { color: '#ef7b33' }
                        },
                        {
                            value: 2180,
                            name: '待处理',
                            itemStyle: { color: '#ffb300' }
                        },
                        {
                            value: 2314,
                            name: '退款中',
                            itemStyle: { color: '#ffd066' }
                        }
                    ],
                    label: {
                        formatter: function (params) {
                            // @ts-ignore 计算占比
                            const percent = ((params.value / 16340) * 100).toFixed(2)
                            return percent + '%' + '：' + params.name
                        },
                        position: 'outside',
                        fontSize: 14
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ],
            graphic: [
                {
                    type: 'text',
                    left: 'center',
                    top: '45%',
                    z: 10,
                    style: {
                        text: '16340',
                        font: '500 22px Microsoft YaHei',
                        fill: '#5f89e6'
                    }
                },
                {
                    type: 'text',
                    left: 'center',
                    top: '55%',
                    z: 10,
                    style: {
                        text: '全部订单',
                        font: 'bold 12px Microsoft YaHei',
                        fill: '#999'
                    }
                }
            ]
        }
    } else if (value === 'b') {
        option = {
            title: {
                text: '全部订单',
                left: '20px',
                top: 10,
                textStyle: {
                    fontWeight: 500,
                    fontSize: 18
                }
            },
            grid: {
                top: '50px',
                left: '20%'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['35%', '50%'],
                    data: [
                        {
                            value: 30000,
                            name: '已处理',
                            itemStyle: { color: '#e15e0d' }
                        },
                        {
                            value: 16000,
                            name: '已取消',
                            itemStyle: { color: '#ff7927' }
                        },
                        {
                            value: 10000,
                            name: '待处理',
                            itemStyle: { color: '#ffb300' }
                        },
                        {
                            value: 6000,
                            name: '退款中',
                            itemStyle: { color: '#ffca4b' }
                        }
                    ],
                    label: {
                        formatter: function (params) {
                            //@ts-ignore 计算占比
                            const percent = ((params.value / 66340) * 100).toFixed(2)
                            return percent + '%' + '：' + params.name
                        },
                        position: 'outside',
                        fontSize: 14
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ],
            graphic: [
                {
                    type: 'text',
                    left: 'center',
                    top: '45%',
                    z: 10,
                    style: {
                        text: '16340',
                        font: '500 22px Microsoft YaHei',
                        fill: '#e15e0d'
                    }
                },
                {
                    type: 'text',
                    left: 'center',
                    top: '55%',
                    z: 10,
                    style: {
                        text: '全部订单',
                        font: 'bold 12px Microsoft YaHei',
                        fill: '#999'
                    }
                }
            ]
        }
    } else if (value === 'c') {
        option = {
            title: {
                text: '全部订单',
                left: '20px',
                top: 10,
                textStyle: {
                    fontWeight: 500,
                    fontSize: 18
                }
            },
            grid: {
                top: '50px',
                left: '20%'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['35%', '50%'],
                    data: [
                        {
                            value: 130000,
                            name: '已处理',
                            itemStyle: { color: '#ff6500' }
                        },
                        {
                            value: 20480,
                            name: '已取消',
                            itemStyle: { color: '#d55e15' }
                        },
                        {
                            value: 5000,
                            name: '待处理',
                            itemStyle: { color: '#ffb300' }
                        },
                        {
                            value: 5000,
                            name: '退款中',
                            itemStyle: { color: '#ffca4d' }
                        }
                    ],
                    label: {
                        formatter: function (params) {
                            //@ts-ignore 计算占比
                            const percent = ((params.value / 166340) * 100).toFixed(2)
                            return percent + '%' + '：' + params.name
                        },
                        position: 'outside',
                        fontSize: 14
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ],
            graphic: [
                {
                    type: 'text',
                    left: 'center',
                    top: '45%',
                    z: 10,
                    style: {
                        text: '166340',
                        font: '500 22px Microsoft YaHei',
                        fill: '#5f89e6'
                    }
                },
                {
                    type: 'text',
                    left: 'center',
                    top: '55%',
                    z: 10,
                    style: {
                        text: '全部订单',
                        font: 'bold 12px Microsoft YaHei',
                        fill: '#999'
                    }
                }
            ]
        }
    }
    // @ts-ignore
    myChart.setOption(option)
}
